<template>
  <div>
    <h1>查看门店</h1>
    <div class="content">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column align="center" fixed prop="appDate" label="开店日期" min-width="10%"></el-table-column>
        <el-table-column align="center" prop="shopName" label="店铺名称" min-width="10%"></el-table-column>
        <el-table-column align="center" prop="describe" label="店铺说明" min-width="20%"></el-table-column>
        <el-table-column align="center" prop="_id" label="商家id" min-width="20%"></el-table-column>
        <el-table-column align="center" prop="bool" label="店铺存续状态" min-width="20%"></el-table-column>
        <el-table-column align="center" fixed="right" label="操作" min-width="20%">
          <template slot-scope="scope">
            <el-button @click="PutClick(scope.row)" type="text" size="small">修改门店</el-button>
            <el-button @click="EndBtn" type="text" size="small">关闭门店</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <transition>
    <div class="putModel" v-if="modelState">
      <div class="putH">
        <h2>门店信息修改</h2>
        <h2 class="Exit" @click="EndBtn">X</h2>
      </div>
      <div class="putC">
        <label for="">店铺名称：</label>
        <el-input clearable v-model="putTemp.name"></el-input><br>
        <label for="">店铺详情：</label>
        <el-input clearable v-model="putTemp.describe"></el-input><br>
      </div>
      <div class="putBtn">
        <el-button type="primary" @click="putBtn">确认</el-button>
      </div>
    </div>
    </transition>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      tableData:[],
      newDate:'',
      // 控制修改模态框弹出
      modelState:false,
      putTemp:{
         id:'',
         name:'',
         describe:''
      }
    };
  },
  components: {},
  created() {},
  mounted() {
    this.getAll()
  },
  methods: {
    // 修改信息
    PutClick(row) {
      this.putTemp.id = row._id
      this.modelState = true
      // console.log(row._id);
    },
    // 渲染门店列表
    getAll(){
       axios.get('/shop/getAll2',{params:{_id:sessionStorage.id}})
        .then(res=>{
          this.tableData.push(res.data[0].shopId)
          console.log(this.tableData[0])
          if(this.tableData[0].bool == 0){
            this.tableData[0].bool = '申请审核中'
          }else if(this.tableData[0].bool == 1){
            this.tableData[0].bool = '闭店审核中'
          }else if(this.tableData[0].bool == 2){
             this.tableData[0].bool = '存续'
          }else if(this.tableData[0].bool == 3){
              axios.post('/shop/Del',{params:{_id:this.tableData[0]._id}})
                .then(res=>{
                  this.getAll()
              })
          }
       })
    },
    // 关闭模态框
    EndBtn(){
      this.modelState = false
    },
    // 模态框确认按钮
    putBtn(){
       axios.post('/shop/Put',{params:{_id:this.putTemp.id,shopName:this.putTemp.name,describe:this.putTemp.describe}})
        .then(res=>{
          if(res.data == true){
            this.getAll()
            this.modelState = false
          }else{
            alert('修改失败！')
          }
       })
    },
    // 获取当前时间
    getDate() {
      const nowDate = new Date();
      const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate()
      };
      const systemDate = date.year + "-" + 0 + date.month + "-" +  date.date;
      this.newDate = systemDate;
    }
  }
};
</script>
<style lang='less' scoped>
@import "../../assets/less/storeList.less";
.v-enter,
.v-leave-to {
  opacity: 0;
  position: fixed;
  transform: translateX(100px);
}
.v-enter-active,
.v-leave-active {
  transition: all 0.4s ease;
}
</style>
